<!DOCTYPE html>
<html>
  <head>
    <title>Cursor Test Page</title>
    <style>
      table {
        table-layout: fixed;
        border-collapse: collapse;
        border: 3px solid gray;
      }

      thead {
        text-align: left;
      }

      thead th {
        border: 3px solid;
      }

      tbody td {
        border: 3px solid gray;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Cursor test page</h1>

    <h2>Title attribute</h2>
    <p title="Title on text">This is a paragraph with a title attribute.
      <br />
      <a title="Title on link" href="http://serenityos.org">This is a link with a title</a>
    </p>

    <h2>Cursors</h2>
    <p style="cursor: wait">This is a paragraph with a custom cursor.
      <br />
      <a style="cursor: cell" href="http://serenityos.org">This is a link with a custom cursor</a>
    </p>

    <table>
      <thead>
        <tr>
          <th>Cursor Name</th>
          <th>Text</th>
          <th>Button</th>
          <th>Block</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><span style="cursor: auto">auto</span></td>
          <td><span style="cursor: auto">auto</span></td>
          <td><button style="cursor: auto">auto</button></td>
          <td width="100px" style="background-color: gray; cursor: wait">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: default">default</span></td>
          <td><span style="cursor: default">default</span></td>
          <td><button style="cursor: default">default</button></td>
          <td style="background-color: darkgray; cursor: default">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: none">none</span></td>
          <td><span style="cursor: none">none</span></td>
          <td><button style="cursor: none">none</button></td>
          <td style="background-color: gray; cursor: none">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: text">text</span></td>
          <td><span style="cursor: text">text</span></td>
          <td><button style="cursor: text">text</button></td>
          <td style="background-color: darkgray; cursor: text">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: context-menu">context-menu</span></td>
          <td><span style="cursor: context-menu">context-menu</span></td>
          <td><button style="cursor: context-menu">context-menu</button></td>
          <td style="background-color: gray; cursor: context-menu">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: help">help</span></td>
          <td><span style="cursor: help">help</span></td>
          <td><button style="cursor: help">help</button></td>
          <td style="background-color: darkgray; cursor: help">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: pointer">pointer</span></td>
          <td><span style="cursor: pointer">pointer</span></td>
          <td><button style="cursor: pointer">pointer</button></td>
          <td style="background-color: gray; cursor: pointer">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: progress">progress</span></td>
          <td><span style="cursor: progress">progress</span></td>
          <td><button style="cursor: progress">progress</button></td>
          <td style="background-color: darkgray; cursor: progress">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: wait">wait</span></td>
          <td><span style="cursor: wait">wait</span></td>
          <td><button style="cursor: wait">wait</button></td>
          <td style="background-color: gray; cursor: wait">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: cell">cell</span></td>
          <td><span style="cursor: cell">cell</span></td>
          <td><button style="cursor: cell">cell</button></td>
          <td style="background-color: darkgray; cursor: cell">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: crosshair">crosshair</span></td>
          <td><span style="cursor: crosshair">crosshair</span></td>
          <td><button style="cursor: crosshair">crosshair</button></td>
          <td style="background-color: gray; cursor: crosshair">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: text">text</span></td>
          <td><span style="cursor: text">text</span></td>
          <td><button style="cursor: text">text</button></td>
          <td style="background-color: darkgray; cursor: text">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: vertical-text">vertical-text</span></td>
          <td><span style="cursor: vertical-text">vertical-text</span></td>
          <td><button style="cursor: vertical-text">vertical-text</button></td>
          <td style="background-color: gray; cursor: vertical-text">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: alias">alias</span></td>
          <td><span style="cursor: alias">alias</span></td>
          <td><button style="cursor: alias">alias</button></td>
          <td style="background-color: darkgray; cursor: alias">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: copy">copy</span></td>
          <td><span style="cursor: copy">copy</span></td>
          <td><button style="cursor: copy">copy</button></td>
          <td style="background-color: gray; cursor: copy">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: move">move</span></td>
          <td><span style="cursor: move">move</span></td>
          <td><button style="cursor: move">move</button></td>
          <td style="background-color: darkgray; cursor: move">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: no-drop">no-drop</span></td>
          <td><span style="cursor: no-drop">no-drop</span></td>
          <td><button style="cursor: no-drop">no-drop</button></td>
          <td style="background-color: gray; cursor: no-drop">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: not-allowed">not-allowed</span></td>
          <td><span style="cursor: not-allowed">not-allowed</span></td>
          <td><button style="cursor: not-allowed">not-allowed</button></td>
          <td style="background-color: darkgray; cursor: not-allowed">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: grab">grab</span></td>
          <td><span style="cursor: grab">grab</span></td>
          <td><button style="cursor: grab">grab</button></td>
          <td style="background-color: gray; cursor: grab">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: grabbing">grabbing</span></td>
          <td><span style="cursor: grabbing">grabbing</span></td>
          <td><button style="cursor: grabbing">grabbing</button></td>
          <td style="background-color: darkgray; cursor: grabbing">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: e-resize">e-resize</span></td>
          <td><span style="cursor: e-resize">e-resize</span></td>
          <td><button style="cursor: e-resize">e-resize</button></td>
          <td style="background-color: gray; cursor: e-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: n-resize">n-resize</span></td>
          <td><span style="cursor: n-resize">n-resize</span></td>
          <td><button style="cursor: n-resize">n-resize</button></td>
          <td style="background-color: darkgray; cursor: n-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: ne-resize">ne-resize</span></td>
          <td><span style="cursor: ne-resize">ne-resize</span></td>
          <td><button style="cursor: ne-resize">ne-resize</button></td>
          <td style="background-color: gray; cursor: ne-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: nw-resize">nw-resize</span></td>
          <td><span style="cursor: nw-resize">nw-resize</span></td>
          <td><button style="cursor: nw-resize">nw-resize</button></td>
          <td style="background-color: darkgray; cursor: nw-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: s-resize">s-resize</span></td>
          <td><span style="cursor: s-resize">s-resize</span></td>
          <td><button style="cursor: s-resize">s-resize</button></td>
          <td style="background-color: gray; cursor: s-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: se-resize">se-resize</span></td>
          <td><span style="cursor: se-resize">se-resize</span></td>
          <td><button style="cursor: se-resize">se-resize</button></td>
          <td style="background-color: darkgray; cursor: se-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: sw-resize">sw-resize</span></td>
          <td><span style="cursor: sw-resize">sw-resize</span></td>
          <td><button style="cursor: sw-resize">sw-resize</button></td>
          <td style="background-color: gray; cursor: sw-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: w-resize">w-resize</span></td>
          <td><span style="cursor: w-resize">w-resize</span></td>
          <td><button style="cursor: w-resize">w-resize</button></td>
          <td style="background-color: darkgray; cursor: w-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: ew-resize">ew-resize</span></td>
          <td><span style="cursor: ew-resize">ew-resize</span></td>
          <td><button style="cursor: ew-resize">ew-resize</button></td>
          <td style="background-color: gray; cursor: ew-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: ns-resize">ns-resize</span></td>
          <td><span style="cursor: ns-resize">ns-resize</span></td>
          <td><button style="cursor: ns-resize">ns-resize</button></td>
          <td style="background-color: darkgray; cursor: ns-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: nesw-resize">nesw-resize</span></td>
          <td><span style="cursor: nesw-resize">nesw-resize</span></td>
          <td><button style="cursor: nesw-resize">nesw-resize</button></td>
          <td style="background-color: gray; cursor: nesw-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: nwse-resize">nwse-resize</span></td>
          <td><span style="cursor: nwse-resize">nwse-resize</span></td>
          <td><button style="cursor: nwse-resize">nwse-resize</button></td>
          <td style="background-color: darkgray; cursor: nwse-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: col-resize">col-resize</span></td>
          <td><span style="cursor: col-resize">col-resize</span></td>
          <td><button style="cursor: col-resize">col-resize</button></td>
          <td style="background-color: gray; cursor: col-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: row-resize">row-resize</span></td>
          <td><span style="cursor: row-resize">row-resize</span></td>
          <td><button style="cursor: row-resize">row-resize</button></td>
          <td style="background-color: darkgray; cursor: row-resize">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: all-scroll">all-scroll</span></td>
          <td><span style="cursor: all-scroll">all-scroll</span></td>
          <td><button style="cursor: all-scroll">all-scroll</button></td>
          <td style="background-color: gray; cursor: all-scroll">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: zoom-in">zoom-in</span></td>
          <td><span style="cursor: zoom-in">zoom-in</span></td>
          <td><button style="cursor: zoom-in">zoom-in</button></td>
          <td style="background-color: darkgray; cursor: zoom-in">&nbsp;</td>
        </tr>
        <tr>
          <td><span style="cursor: zoom-out">zoom-out</span></td>
          <td><span style="cursor: zoom-out">zoom-out</span></td>
          <td><button style="cursor: zoom-out">zoom-out</button></td>
          <td style="background-color: gray; cursor: zoom-out">&nbsp;</td>
        </tr>

      </tbody>
    </table>
  </body>
</html>
